---
import { COMMUNITY_INVITE_URL } from "../../consts";
import { getIsRtlFromUrl } from "../../languages";

export interface Props {
  editHref: string;
}

const { editHref } = Astro.props;
const { pathname } = Astro.url;
const isRtl = getIsRtlFromUrl(pathname);
// const isLangEN = getLanguageFromURL(pathname) === "en";
---

<div
  dir={isRtl ? "rtl" : "ltr"}
  class="flex w-full flex-col pt-8 text-center md:text-start lg:py-0"
>
  <h2
    class="mb-4 hidden text-lg font-semibold text-slate-900 dark:text-ces-50 md:block"
  >
    More
  </h2>

  <ul class="flex flex-col items-center gap-2 text-sm md:items-start">
    <li
      class="hidden text-ces-800 hover:text-ces-400 dark:text-ces-200 dark:hover:text-ces-100 md:block"
    >
      <a
        class="flex items-center gap-2"
        href={editHref}
        target="_blank"
        rel="noreferrer noopener"
      >
        <span>
          <svg
            class="svg-inline--fa fa-pen fa-w-16 inline"
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="pen"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            height="1em"
            width="1em"
          >
            <path
              fill="currentColor"
              d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
            ></path>
          </svg>
        </span>
        <span> Edit this page</span>
      </a>
    </li>

    <li
      class="text-ces-800 hover:text-ces-400 dark:text-ces-200 dark:hover:text-ces-100"
    >
      <a
        class="items-top flex gap-2"
        href={COMMUNITY_INVITE_URL}
        target="_blank"
        rel="noreferrer noopener"
      >
        <span>
          <svg
            class="svg-inline--fa fa-comment-alt fa-w-16 inline"
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="comment-alt"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            height="1em"
            width="1em"
          >
            <path
              fill="currentColor"
              d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
            ></path>
          </svg>
        </span>
        <span> Join Our Discord Community</span>
      </a>
    </li>
  </ul>
</div>
